<template>
    <div>
        <div class="pages-wrap">
            <div class="prev" @click="prev" :class="{'notClick':page==0}">
            </div>
            <ul class="page-content">
                <li class="page" v-for="(item, index) in pages" :class="[page == item.id ? 'active' : '']" :key="index"
                    @click="changeDay(item.id)">
                    <p>{{ item.date }}</p>
                </li>
            </ul>
            <div class="next" @click="next" :class="{ 'notClick': page == total.length - 1 || currDay >= today }">
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "timeLine",
    props: ['total', 'currDay', 'today'],
    watch: {
        page (newval) {
            this.$emit('change', newval);
        },
        currDay (val) {
            this.page = val;
        }
    },
    methods: {
        changeDay (day) {
            if (day > this.today) {
                this.$store.dispatch('asyncTips', {
                    isShow: true,
                    msg: '暂未开启请耐心等待~'
                })
                return
            }
            this.page = day;
        },
        prev () {
            this.page > 0 && (this.page--)
        },
        next () {
            this.page < this.total.length && (this.page++);
        }
    },
    data () {
        return {
            page: this.currDay
        }
    },
    mounted () {

    },
    computed: {
        pages () {
            let arr = []
            for (let i = Math.max(0, this.page - 3); i <= Math.min(this.total.length - 1, this.page + 3); i++) {
                var num = i;
                arr.push({
                    date: this.total[num],
                    id: i
                })
            }
            if (arr.length < 5) {
                var max = arr[arr.length - 1].id;
                for (var j = max; j < 5; j++) {
                    var num = j + 1;
                    arr.push({
                        date: this.total[num],
                        id: j + 1
                    })
                }
            }
            // console.log(arr);
            return arr;
        }
    }
}
</script>

<style scoped lang="scss">

</style>